<template>
  <div class="comment-list">
    <el-empty v-if="tableData.length == 0" description="暂无评论"></el-empty>
    <div class="comment-item" v-for="(item, idx) in tableData" :key="item.id">
      <div class="avatar">
        <el-avatar :size="40" :src="headImg(item.sysUser)"></el-avatar>
      </div>
      <div class="content">
        <div class="info">
          <span class="user-name">
            {{ item.sysUser.userName }}
            <el-tag v-if="item.sysUser.id == author" size="mini">作者</el-tag>
          </span>

          <span>{{ item.createTime }}</span>
        </div>
        <div class="content-in">
          {{ item.contents }}
        </div>
        <ReplyList
          v-if="item.childList.length"
          :replyList="item.childList"
          :author="author"
          :userId="userId"
        />
        <Reply v-if="replyIdx == idx" :replyData="item" />
        <div class="reply-btn">
          <el-button
            type="text"
            icon="el-icon-chat-dot-round"
            @click="handleReply(idx)"
            :disabled="!topicStatus"
            >回复</el-button
          >
          <el-popconfirm
            title="确定删除吗？"
            v-if="userId == author"
            @confirm="handleDelete(item)"
          >
            <el-button type="text" slot="reference" icon="el-icon-circle-close"
              >删除</el-button
            >
          </el-popconfirm>
        </div>
      </div>
    </div>
    <Pagination
      v-show="parseInt(pageObj.count) > 0"
      :total="parseInt(pageObj.count)"
      @change="getList"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
    />
  </div>
</template>
<script>
import setInfo from '@/mixins/setInfo'
import userInfo from '@/mixins/userInfo'
export default {
  mixins: [setInfo, userInfo],
  components: {
    Reply: () => import('./Reply.vue'),
    ReplyList: () => import('./ReplyList.vue'),
  },
  data() {
    return {
      replyIdx: '-1',
      replyShow: '-1',
      listQuery: {
        pId: 0,
        page: 1,
        limit: 10,
      },
      tableData: [],
      pageObj: {},
    }
  },
  props: ['row', 'topicStatus'],
  computed: {
    author() {
      return this.row.sysUser.id
    },
  },
  mounted() {
    this.listQuery.topicId = this.row.id
    this.getList()
    this.$bus.$on('refreshBbsCommentList', this.getList)
  },
  beforeDestroy() {
    this.$bus.$off('refreshBbsCommentList')
  },
  methods: {
    async getList() {
      let res = await this.$store.dispatch('queryBbsComment', this.listQuery)
      this.tableData = res.data
      this.pageObj = res
      this.$bus.$emit('sendCommentCount', res.count)
    },
    handleReply(idx) {
      // 预览模式不触发事件
      if (this.$route.query.queryMode == 2) {
        this.previewTip()
        return
      }
      //判断是否登录
      if (!this.$store.getters.userId) {
        this.loginTip()
        return
      }
      if (this.replyIdx != idx) {
        this.replyIdx = idx
      } else {
        this.replyIdx = -1
      }
    },
    async handleDelete(row) {
      await this.$store.dispatch('delBbsComment', row)
      this.getList()
    },
  },
}
</script>
<style scoped lang="scss">
.comment-item {
  margin: 10px 0;
  position: relative;
  clear: both;
  border-bottom: 1px solid #f2f2f2;
  .avatar {
    position: absolute;
    left: 0;
    top: 0;
    width: 80px;
    text-align: center;
  }
  .content {
    padding-left: 80px;
    box-sizing: border-box;
    min-height: 100px;
    .info {
      color: #c9cdd4;
      font-size: 14px;
      line-height: 22px;
      span {
        margin-right: 10px;
      }
      .user-name {
        color: #86909c;
      }
    }
    .content-in {
      padding: 10px 0;
      color: #666;
      font-size: 14px;
      line-height: 1.5;
      text-align: justify;
    }
  }
  .reply-btn {
    text-align: right;
    button {
      margin-left: 10px;
    }
  }
}
</style>